<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生 JavaScript 应用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            padding: 20px;
        }
        
        .app {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .nav {
            background: #007bff;
            padding: 0;
            display: flex;
        }
        
        .nav-btn {
            background: none;
            border: none;
            color: white;
            padding: 15px 25px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s;
        }
        
        .nav-btn:hover {
            background: rgba(255,255,255,0.1);
        }
        
        .nav-btn.active {
            background: rgba(255,255,255,0.2);
        }
        
        .page {
            display: none;
            padding: 30px;
        }
        
        .page.active {
            display: block;
        }
        
        h1 {
            color: #333;
            margin-bottom: 20px;
        }
        
        .todo-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            margin-bottom: 15px;
        }
        
        .btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 10px;
        }
        
        .btn:hover {
            background: #0056b3;
        }
        
        .btn-danger {
            background: #dc3545;
        }
        
        .btn-danger:hover {
            background: #c82333;
        }
        
        .todo-list {
            margin-top: 20px;
        }
        
        .todo-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px;
            border: 1px solid #eee;
            border-radius: 4px;
            margin-bottom: 8px;
            background: #f8f9fa;
        }
        
        .todo-item.completed {
            opacity: 0.6;
        }
        
        .todo-item.completed .todo-text {
            text-decoration: line-through;
        }
        
        .todo-text {
            flex: 1;
            cursor: pointer;
            padding: 5px;
        }
        
        .todo-edit-input {
            flex: 1;
            padding: 8px;
            border: 1px solid #007bff;
            border-radius: 4px;
            font-size: 16px;
        }
        
        .todo-actions {
            display: flex;
            gap: 5px;
        }
        
        .blank-content {
            text-align: center;
            color: #666;
            padding: 50px;
        }
        
        .blank-content h2 {
            margin-bottom: 15px;
            color: #999;
        }
        
        .filter-buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
        }
        
        .filter-btn {
            background: #f8f9fa;
            color: #333;
            border: 1px solid #ddd;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .filter-btn:hover {
            background: #e9ecef;
        }
        
        .filter-btn.active {
            background: #007bff;
            color: white;
            border-color: #007bff;
        }
    </style>
</head>
<body>
    <div class="app">
        <nav class="nav">
            <button class="nav-btn active" onclick="showPage('todo')">Todo List</button>
            <button class="nav-btn" onclick="showPage('blank')">空白页面</button>
        </nav>
        
        <!-- Todo List 页面 -->
        <div id="todo-page" class="page active">
            <h1>📝 Todo List</h1>
            <input type="text" id="todoInput" class="todo-input" placeholder="输入新的待办事项..." onkeypress="handleEnter(event)">
            <button class="btn" onclick="addTodo()">添加</button>
            <button class="btn btn-danger" onclick="clearAll()">清空全部</button>
            
            <div style="margin-top: 15px;">
                <input type="text" id="searchInput" class="todo-input" placeholder="搜索待办事项..." oninput="filterTodos()">
                <div class="filter-buttons" style="margin-top: 10px;">
                    <button class="filter-btn active" onclick="setFilter('all')">全部</button>
                    <button class="filter-btn" onclick="setFilter('completed')">已完成</button>
                    <button class="filter-btn" onclick="setFilter('pending')">未完成</button>
                </div>
            </div>
            
            <div id="todoList" class="todo-list">
                <!-- 待办事项将在这里显示 -->
            </div>
            
            <p id="todoStats" style="margin-top: 20px; color: #666; text-align: center;">
                总计: 0 | 已完成: 0 | 未完成: 0
            </p>
        </div>
        
        <!-- 空白页面 -->
        <div id="blank-page" class="page">
            <div class="blank-content">
                <h2>🎨 空白页面</h2>
                <p>这是一个空白页面，你可以在这里添加任何内容。</p>
                <p style="margin-top: 20px; font-size: 14px; color: #999;">
                    提示：直接编辑 native.html 文件来修改这个页面
                </p>
            </div>
        </div>
    </div>

    <script>
        let todos = [];
        let todoIdCounter = 1;
        let editingId = null;
        let currentFilter = 'all';
        let searchText = '';
        
        // 页面切换
        function showPage(pageName) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            
            // 移除所有导航按钮的激活状态
            document.querySelectorAll('.nav-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            
            // 显示选中的页面
            document.getElementById(pageName + '-page').classList.add('active');
            
            // 激活对应的导航按钮
            event.target.classList.add('active');
        }
        
        // Todo 功能
        function addTodo() {
            const input = document.getElementById('todoInput');
            const text = input.value.trim();
            
            if (text) {
                const newTodo = {
                    id: todoIdCounter++,
                    text: text,
                    completed: false
                };
                todos.push(newTodo);
                input.value = '';
                renderTodos();
            }
        }
        
        function toggleTodo(id) {
            const todo = todos.find(t => t.id === id);
            if (todo) {
                todo.completed = !todo.completed;
                renderTodos();
            }
        }
        
        function deleteTodo(id) {
            todos = todos.filter(t => t.id !== id);
            renderTodos();
        }
        
        function clearAll() {
            todos = [];
            renderTodos();
        }
        
        function getFilteredTodos() {
            let filtered = todos;
            
            // 按状态过滤
            if (currentFilter === 'completed') {
                filtered = filtered.filter(todo => todo.completed);
            } else if (currentFilter === 'pending') {
                filtered = filtered.filter(todo => !todo.completed);
            }
            
            // 按搜索文本过滤
            if (searchText.trim()) {
                filtered = filtered.filter(todo => 
                    todo.text.toLowerCase().includes(searchText.toLowerCase())
                );
            }
            
            return filtered;
        }
        
        function renderTodos() {
            const todoList = document.getElementById('todoList');
            const filteredTodos = getFilteredTodos();
            
            if (filteredTodos.length === 0) {
                todoList.innerHTML = `
                    <div style="text-align: center; color: #666; padding: 20px;">
                        ${searchText.trim() ? '没有找到匹配的待办事项' : '暂无待办事项'}
                    </div>
                `;
                updateStats();
                return;
            }
            
            todoList.innerHTML = filteredTodos.map(todo => `
                <div class="todo-item ${todo.completed ? 'completed' : ''}">
                    ${editingId === todo.id ? `
                        <input type="text" class="todo-edit-input" value="${todo.text}" 
                               onkeypress="handleEditEnter(event, ${todo.id})" 
                               onblur="saveEdit(${todo.id})" 
                               id="edit-input-${todo.id}" />
                    ` : `
                        <span class="todo-text" onclick="toggleTodo(${todo.id})">${todo.text}</span>
                    `}
                    <div class="todo-actions">
                        ${editingId === todo.id ? `
                            <button class="btn" onclick="saveEdit(${todo.id})">保存</button>
                            <button class="btn" onclick="cancelEdit()">取消</button>
                        ` : `
                            <button class="btn" onclick="startEdit(${todo.id})">编辑</button>
                            <button class="btn btn-danger" onclick="deleteTodo(${todo.id})">删除</button>
                        `}
                    </div>
                </div>
            `).join('');
            
            // 如果正在编辑，聚焦到输入框
            if (editingId) {
                const editInput = document.getElementById(`edit-input-${editingId}`);
                if (editInput) {
                    editInput.focus();
                    editInput.select();
                }
            }
            
            updateStats();
        }
        
        function updateStats() {
            const total = todos.length;
            const completed = todos.filter(t => t.completed).length;
            const pending = total - completed;
            
            document.getElementById('todoStats').textContent = 
                `总计: ${total} | 已完成: ${completed} | 未完成: ${pending}`;
        }
        
        function handleEnter(event) {
            if (event.key === 'Enter') {
                addTodo();
            }
        }
        
        // 编辑功能
        function startEdit(id) {
            editingId = id;
            renderTodos();
        }
        
        function saveEdit(id) {
            const editInput = document.getElementById(`edit-input-${id}`);
            if (editInput) {
                const newText = editInput.value.trim();
                if (newText) {
                    const todo = todos.find(t => t.id === id);
                    if (todo) {
                        todo.text = newText;
                    }
                }
            }
            editingId = null;
            renderTodos();
        }
        
        function cancelEdit() {
            editingId = null;
            renderTodos();
        }
        
        function handleEditEnter(event, id) {
            if (event.key === 'Enter') {
                saveEdit(id);
            } else if (event.key === 'Escape') {
                cancelEdit();
            }
        }
        
        // 搜索和过滤功能
        function filterTodos() {
            const searchInput = document.getElementById('searchInput');
            searchText = searchInput.value;
            renderTodos();
        }
        
        function setFilter(filter) {
            currentFilter = filter;
            
            // 更新按钮状态
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            
            renderTodos();
        }
        
        // 初始化
        console.log('原生 JavaScript 应用已加载！');
    </script>
</body>
</html>